<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { STATIC_URL } from '@/config/config';
import router from '@/router';

export interface TablePersonCardProps {
  id: number;
  username: string;
  avatar: string;
}

export default defineComponent({
  name: 'TablePersonCard',
  props: {
    person: {
      type: Object as PropType<TablePersonCardProps>,
      required: true,
    }
  },
  setup(props) {
    let avatarUrl = '';
    if(props.person.avatar !== null && props.person.avatar !== '') {
      // eslint-disable-next-line vue/no-setup-props-destructure
      avatarUrl = props.person.avatar;
    }
    if( avatarUrl != '' && !avatarUrl.startsWith('http')) {
      avatarUrl = `${STATIC_URL}${avatarUrl}`;
    }
    return {
      avatarUrl,
    };
  },
  methods: {
    click(name: string) {
      router.push({
        name: 'PersonPage',
        query: {
          username: name
        }
      });
    }
  }
});
</script>

<template>
  <span @click="click(person.username)">


    <template v-if="avatarUrl !== ''">
      <a-avatar :src="avatarUrl"/>
    </template>
    <template v-else>
      <a-avatar>
        {{ person.username }}
      </a-avatar>
    </template>
    <a type='link' class="m-2 link-primary text-decoration-none">{{person.username}}</a>
  </span>
</template>

<style scoped lang="less">

</style>
